<template>
  <div>
  <el-header>
    <nav>
      <el-menu
          :default-active="this.$route.path"
          class="el-menu-demo"
          mode="horizontal"
          router
          @select="handleSelect"
      >
        <el-menu-item index="/" >
          <i class="el-icon-s-home"></i>
          <span>主页</span>
        </el-menu-item>

      <el-menu-item index="/writeArticle" >
        <i class="el-icon-edit-outline"></i>
        <span>发表博文</span>
      </el-menu-item>

        <el-menu-item index="/privatePage" >
          <i class="el-icon-user"></i>
          <span>个人主页</span>
        </el-menu-item>
        <el-menu-item v-if=this.$store.state.isAdmin index="/admin">
          <i class="el-icon-user-solid"></i>
          <span>管理员界面</span>
        </el-menu-item>

        <el-menu-item style="position: absolute;right:70px">
          <el-input
              placeholder="请输入内容"
              v-model="inputSearch"
              type="text"
              @keydown.space.native="inputSearch = inputSearch + ' '"
              @keydown.enter.native="Asearch"
              clearable
              autofocus>
            <el-button slot="append" icon="el-icon-search" @click.native="Asearch()"
                       @keydown.enter.native="Asearch"></el-button>
          </el-input>
        </el-menu-item>


        <el-menu-item v-if=!this.$store.state.isLogin index="/login" style="position: absolute;right:10px;">登录</el-menu-item>
        <el-menu-item v-if=this.$store.state.isLogin @click.native="logOut()" style="position: absolute;right:10px;">注销</el-menu-item>

      </el-menu>

    </nav>

  </el-header>
    <div><router-view v-if="isRouterAlive"/></div>
  </div>

</template>


<style>
.el-main {
  background-color:		#F5F5F5	;
  color: #333;
  text-align: center;
  line-height: 150px;
}

.login-bg{
  width: 95%;
  height: 100vh;

}
#particles-js{
  position: absolute;
}
</style>


<script>
export default {
  provide (){
    return {
      reload:this.reload
    }
  },
  data() {
    return {
      isRouterAlive:true,
      navList: [
        { name: "/", navItem: "首页" },
        { name: "/privatePage", navItem: "个人主页" }
      ],
      login:{name:"/login",navItem:"登陆"},
      logout:{name:"/logout",navItem:"登出"},
      inputSearch:''
    }

  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logOut(){
      this.$message.success("已退出登录！")
      this.$store.dispatch('clear');
      this.$store.state.isLogin = false;
      this.$store.state.isAdmin = false;
      this.reload();
    },
    Asearch(){
      var input=this.inputSearch;
      this.$store.commit('changeInput',input);
      if(input.length===0){
        window.alert("请输入内容！");
        return;
      }
      this.$router.push({path:'/search', query: { keyword:input }});
      this.reload()
    },
    reload (){
      this.isRouterAlive = false
      this.$nextTick(function(){
        this.isRouterAlive = true
      })
    }
  },

}


</script>
